<template>
    <div class="container">
        <div class="content">
            <div class="left">
                <el-carousel :interval="5000" arrow="always" height="400px">
                    <el-carousel-item v-for="file in detail.projectfiles" :key="file">
                        <img class="project-img" :src="file +
                            '?x-oss-process=image/watermark,image_' +
                            toBase64(
                                'water/logo_white.png?x-oss-process=image/resize,P_30'
                            ) +
                            ',g_center,t_60'
                            " />
                    </el-carousel-item>
                </el-carousel>
            </div>

            <div class="right">
                <div class="case-name">
                    {{ detail.name }}
                </div>

                <div class="bottom">
                    <div class="tools">
                        <div class="icon-views">
                            <img :src="`${_oss_}images/works/icon-view.png`" alt="北京华锐云空间" />
                            <span>{{ detail.page_view || 0 }}</span>
                        </div>
                        <div class="icon-star" @click="onLike(detail)">
                            <img v-if="detail.is_like" :src="`${_oss_}images/works/icon-like-active.png`" alt="北京华锐云空间" />
                            <img v-else :src="`${_oss_}images/works/icon-like.png`" alt="北京华锐云空间" />
                            <span>{{ detail.like || 0 }}</span>
                        </div>
                    </div>

                    <div class="btn-group">
                        <div class="btn btn-1" :class="{ disabled: IsCaseVideoDisable() }" @click="emits('onCaseView')">
                            案例视频
                        </div>
                        <div class="btn btn-2" @click="emits('onCaseExperience')">
                            {{ detail.id == 165 ? "立即体验" : "案例体验" }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="details">
            <div class="title">案例介绍</div>
            <div class="desc" v-html="detail.synopsiscontent || ''"></div>
        </div>
    </div>
</template>
<script setup>
import { useCaseLike } from "@/hooks";

const { onLike } = useCaseLike();
const userStore = useUserStore();
const props = defineProps({
    detail: {
        type: Object,
        default: () => ({}),
    },
});

const IsCaseVideoDisable = () => {
    if (props.detail.id == 253 || props.detail.id == 256) {
        if (userStore.userInfo.level == 3) {
            return !props.detail.url;
        } else {
            return true;
        }
    }
    return !props.detail.url;
}

const emits = defineEmits(["onCaseView", "onCaseExperience"]);
</script>
<style lang="scss" scoped>
.container {
    position: relative;
    width: 1200px;
    min-height: 700px;
    margin: 0 auto;
    background-color: #fff;
    padding: 50px;

    .like-btn {
        position: absolute;
        top: 0;
        right: -50px;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background-color: #fff;
        cursor: pointer;
        box-shadow: 0px 0px 10px 0px rgba(1, 23, 86, 0.1);

        img {
            width: 20px;
        }
    }

    .content {
        display: flex;
        margin-bottom: 30px;

        .left {
            width: 750px;
            height: 400px;

            .project-img {
                width: 100%;
                height: 100%;
                // object-fit: cover;
            }
        }

        .right {
            position: relative;
            margin-left: 19px;
            padding-top: 28px;
        }

        .case-name {
            color: #323741;
            font-size: 26px;
            font-weight: bold;
        }

        .bottom {
            position: absolute;
            bottom: 40px;

            .tools {
                display: flex;
                margin-bottom: 20px;

                .icon-star {
                    cursor: pointer;
                }

                .icon-star,
                .icon-views {
                    display: flex;
                    align-items: center;
                    margin-right: 15px;
                    color: #333;
                    font-size: 14px;
                    font-weight: 500;

                    img {
                        width: 14px;
                        margin-right: 3px;
                    }
                }
            }
        }

        .btn-group {
            .btn {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 300px;
                height: 60px;
                background-color: rgba(21, 121, 188, 0.9);
                color: #fff;
                border-radius: 6px;
                font-size: 20px;
                user-select: none;
                cursor: pointer;

                &.disabled {
                    color: #fff;
                    background-color: #ccc;
                    cursor: default;
                    pointer-events: none;
                }

                &-1 {
                    &::before {
                        content: "";
                        width: 30px;
                        height: 28px;
                        background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/case-detail/icon-1_active.png");
                        background-size: 100% 100%;
                        margin-right: 19px;
                    }
                }

                &-2 {
                    margin-top: 30px;

                    &::before {
                        content: "";
                        width: 30px;
                        height: 30px;
                        background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/case-detail/icon-2_active.png");
                        background-size: 100% 100%;
                        margin-right: 19px;
                    }
                }

                &:not(.disabled):hover {
                    background: #1579bc;
                    color: #fff;
                    box-shadow: 0px 4px 16px 0px rgba(74, 154, 247, 0.26);

                    &.btn-1::before {
                        background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/case-detail/icon-1_active.png");
                    }

                    &.btn-2::before {
                        background-image: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/case-detail/icon-2_active.png");
                    }
                }
            }
        }
    }

    .details {
        .title {
            font-size: 22px;
            color: #323741;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .desc {
            color: #666666;
            word-break: break-all;
            white-space: pre-wrap;
            font-size: 16px !important;
            font-family: "宋体" !important;
            line-height: 1.5em !important;

            :deep(*) {
                font-size: 16px !important;
                font-family: "宋体" !important;
                line-height: 1.5em !important;
            }

            :deep(img) {
                max-width: 100%;
                display: block;
            }
        }
    }
}
</style>
